<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>商品管理</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="format-detection" content="telephone=no">
  <!-- 引入样式 -->
<link rel="stylesheet" href="/resources/layui/css/layui.css" media="all">
<link rel="stylesheet" href="/resources/css/public.css" media="all">
</head>
<body class="childrenBody">
<form class="layui-form" id="searchForm" method="post">
    <div class="layui-form-item">
    	<div class="layui-inline">
            <label class="layui-form-label" >供应商:</label>
            <div class="layui-input-inline">
                <select name="providerid" id="search_prividerid">
                	
                </select>
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label" >商品名称:</label>
            <div class="layui-input-inline">
                <input type="text" name="goodsname"  autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label" >生产批号:</label>
            <div class="layui-input-inline">
                <input type="text" name="productcode" autocomplete="off" class="layui-input">
            </div>
        </div>
         <div class="layui-inline">
            <label class="layui-form-label" >批准文号:</label>
            <div class="layui-input-inline">
                <input type="text" name="promitcode" autocomplete="off" class="layui-input">
            </div>
        </div>
         <div class="layui-inline">
            <label class="layui-form-label" >商品描述:</label>
            <div class="layui-input-inline">
                <input type="text" name="description" autocomplete="off" class="layui-input">
            </div>
        </div>
         <div class="layui-inline">
            <label class="layui-form-label" >商品规格:</label>
            <div class="layui-input-inline">
                <input type="text" name="size" autocomplete="off" class="layui-input">
            </div>
        </div>
    </div>
    <div class="layui-form-item" style="text-align: center;">
        <button type="button" class="layui-btn layui-btn-normal  layui-icon layui-icon-search" id="doSearch">查询</button>
		<button type="reset" class="layui-btn layui-btn-warm  layui-icon layui-icon-refresh">重置</button>
		
    </div>
</form>
<table id="goodsList" lay-filter="goodsList"></table>
<!--表格工具条-->
<div  style="display: none;" id="tableToolBar">
	<a class="layui-btn  layui-btn-sm " lay-event="add">添加</a>
</div>
<!--操作-->
<div   style="display: none;" id="goodsListBar">
    <a class="layui-btn layui-btn-sm"  lay-event="update"  >修改</a>
    <a class="layui-btn layui-btn-sm layui-btn-danger"   lay-event="delete"  >删除</a>
</div>

<!-- 添加和修改开始 -->
<div id="dataFrmContent" style="padding: 10px;display: none;" >
	<form class="layui-form" method="post" id="dataFrm" lay-filter="dataFrm" >
		<div class="layui-col-md12 layui-col-xs12">
				<div class="layui-row layui-col-space10">
					<div class="layui-col-md9 layui-col-xs7">
						<div class="layui-form-item magt3">
							<label class="layui-form-label">供应商:</label>
							<div class="layui-input-block">
							<input type="hidden" name="id">
								<select name="providerid" id="providerid">
								</select>
							</div>
						</div>
						<div class="layui-form-item">
							<label class="layui-form-label">商品名称:</label>
							<div class="layui-input-block">
								<input type="text" name="goodsname" class="layui-input" lay-verify="required" placeholder="请输入商品名称">
							</div>
						</div>
						<div class="layui-form-item">
							<label class="layui-form-label">商品描述:</label>
							<div class="layui-input-block">
								<input type="text" name="description" class="layui-input" placeholder="请输入商品描述">
							</div>
						</div>
					</div>
					<div class="layui-col-md3 layui-col-xs5">
						<div class="layui-upload-list thumbBox mag0 magt3" id="goodsimgDiv">
							<!-- 显示上传的图片 -->
							<img class="layui-upload-img thumbImg" id="showGoodsImg" src="/file/downloadShowFile?path=images/defaultgoodsimg.png">
							<!-- 保存当前显示图片的地址 -->
							<input type="hidden" name="goodsimg" id="goodsimg" value="images/defaultgoodsimg.png">
						</div>
					</div>
				</div>
				<div class="layui-form-item magb0">
					<div class="layui-inline">
						<label class="layui-form-label">产地:</label>
							<div class="layui-input-block">
								<input type="text" name="produceplace" class="layui-input" lay-verify="required" placeholder="请输入产地">
							</div>
					</div>
					<div class="layui-inline">
						<label class="layui-form-label">包装:</label>
							<div class="layui-input-block">
								<input type="text" name="goodspackage" class="layui-input" lay-verify="required" placeholder="请输入包装">
							</div>
					</div>
					<div class="layui-inline">
						<label class="layui-form-label">规格:</label>
							<div class="layui-input-block">
								<input type="text" name="size" class="layui-input" lay-verify="required" placeholder="请输入规格">
							</div>
					</div>
					<div class="layui-inline">
						<label class="layui-form-label">生产批号:</label>
							<div class="layui-input-block">
								<input type="text" name="productcode" class="layui-input" lay-verify="required" placeholder="请输入生产批号">
							</div>
					</div>
					<div class="layui-inline">
						<label class="layui-form-label">批准文号:</label>
							<div class="layui-input-block">
								<input type="text" name="promitcode" class="layui-input" lay-verify="required" placeholder="请输入批准文号">
							</div>
					</div>
					<div class="layui-inline">
						<label class="layui-form-label">销售价格:</label>
							<div class="layui-input-block">
								<input type="text" name="price" class="layui-input" lay-verify="required|number" placeholder="请输入销售价格">
							</div>
					</div>
					<div class="layui-inline">
						<label class="layui-form-label">库存量:</label>
							<div class="layui-input-block">
								<input type="text" name="number" class="layui-input" lay-verify="required|number" placeholder="请输入库存量">
							</div>
					</div>
					<div class="layui-inline">
						<label class="layui-form-label">预警值:</label>
						<div class="layui-input-block">
							<input type="text" name="dangernum" class="layui-input" lay-verify="required|number" placeholder="请输入预警值">
						</div>
					</div>
				</div>
				<div class="layui-form-item magb0">
					   <label class="layui-form-label">是否有效</label>
				      <div class="layui-input-inline">
				       <input type="radio" name="available"  value="1" title="有效" checked="">
				      <input type="radio" name="available"  value="0" title="无效">
				      </div>
				</div>
				<div class="layui-form-item magb0" style="text-align: center;">
					    <div class="layui-input-block">
					      <button type="button" class="layui-btn layui-btn-normal layui-btn-sm layui-icon layui-icon-release" lay-filter="doSubmit" lay-submit="">提交</button>
					      <button type="reset" class="layui-btn layui-btn-warm layui-btn-sm layui-icon layui-icon-refresh" >重置</button>
					    </div>
				  	</div>
			</div>
	</form>
</div>
<!-- 添加和修改结束 -->

<script type="text/javascript" src="/resources/layui/layui.js"></script>
</body>
<script type="text/javascript">
    var tableIns;
    layui.use(['form','layer','table','upload'],function(){
        var form = layui.form,
            layer = layui.layer,
            $ = layui.jquery,
            upload=layui.upload,
            table = layui.table;
        //商品列表
        tableIns = table.render({
            elem: '#goodsList',
            url : '/goods/loadAllGoods',
            cellMinWidth : 95,
            toolbar: '#tableToolBar',
            page : true,
            height : "full-150",
            id : "goodsListTable",
            cols : [ [
                {field: 'id', title: '商品ID', minWidth:80, align:"center"},
                {field: 'goodsname', title: '商品名称',width:120, minWidth:100, align:"center"},
                {field: 'providername', title: '供应商', minWidth:100,width:120, align:"center"},
                {field: 'produceplace', title: '产地', minWidth:100,width:120, align:"center"},
                {field: 'size', title: '规格',width:120,  align:'center'},
                {field: 'goodspackage', title: '包装',width:120, minWidth:100, align:"center"},
                {field: 'productcode', title: '生产批号',width:180, minWidth:100, align:"center"},
                {field: 'promitcode', title: '批准文号',width:120, minWidth:100, align:"center"},
                {field: 'description', title: '描述',width:180, minWidth:100, align:"center"},
                {field: 'price', title: '价格',width:180, minWidth:100, align:"center"},
                {field: 'number', title: '库存',width:120, minWidth:100, align:"center"},
                {field: 'dangernum', title: '预警值',width:120, minWidth:100, align:"center"},
                {field: 'goodsimg', title: '图片',width:120, minWidth:100, align:"center",templet:function(data){
                	return "<img width=40 height=40 src=/file/downloadShowFile?path="+data.goodsimg+" />";
                }},
                {field:'available', width:120, title: '是否有效',align:'center',templet:function(data){
			    	  return data.available==1?'<font color=blue>有效</font>':'<font color=red>无效</font>';
			      }},
                {title: '操作', minWidth:185, templet:'#goodsListBar',fixed:"right",align:"center"}
            ] ]
        });
        
        //加载 查询条件里面的供应商下拉列表
        $.get("/provider/loadAllAvailableProviderJson",function(obj){
        	var search_providerid=$("#search_prividerid");
        	var providerid=$("#providerid");
        	var html="<option value=''>请选择供应商</option>"
        	for(var i=0;i<obj.length;i++){
        		html+="<option value="+obj[i].id+">"+obj[i].providername+"</option>"
        	}
        	search_providerid.html(html);
        	providerid.html(html);
        	form.render("select");
        });

        //查询
        $("#doSearch").click(function(){
            var params=$("#searchForm").serialize();
            table.reload('goodsListTable', {
                url: '/goods/loadAllGoods?'+params
            });
        });
        //监听头工具栏事件
        table.on('toolbar(goodsList)', function(obj){
            switch(obj.event){
	            case 'add':
	               	toAddGoods();
                	break;
            };
        });

        //打开 添加商品的弹出层
        var url="";
        var index;
        function toAddGoods(){
            index = layui.layer.open({
                title : "添加商品",
                type : 1,//页面层
                content : $("#dataFrmContent"),
                skin:'layui-layer-molv',
				area : [ '800px', '550px' ],
				shadeClose:true,//设置是否点击遮罩关闭
				maxmin:true,//设置是否显示最大化和最小化的按钮
				resize:true,//设置是否支持拉伸缩小放大  默认为true
                success : function(layero, index){
                	$("#dataFrm")[0].reset();
                    url="/goods/addGoods"
                    $("#showGoodsImg").attr("src","/file/downloadShowFile?path=images/defaultgoodsimg.png")
				    $("#goodsimg").val("images/defaultgoodsimg.png")
                }
            })
        }
        
        //修改商品
        function updateGoods(data){
        	index = layui.layer.open({
                title : "添加商品",
                type : 1,//页面层
                content : $("#dataFrmContent"),
                skin:'layui-layer-molv',
				area : [ '800px', '550px' ],
				shadeClose:true,//设置是否点击遮罩关闭
				maxmin:true,//设置是否显示最大化和最小化的按钮
				resize:true,//设置是否支持拉伸缩小放大  默认为true
                success : function(layero, index){
                	$("#dataFrm")[0].reset();
                	form.val("dataFrm",data);
                	$("#showGoodsImg").attr("src","/file/downloadShowFile?path="+data.goodsimg);
                    url="/goods/updateGoods"
                }
            })
        }
        //监听提交
        form.on('submit(doSubmit)', function(data){
            var params=$("#dataFrm").serialize();
            $.post(url,params,function(obj){
   				layer.msg(obj.msg);
   				  //刷新table
                 tableIns.reload();
   				layer.close(index);
            })
            return false;
        });
        
        //列表操作
        table.on('tool(goodsList)', function(obj){
            var layEvent = obj.event,
                data = obj.data;
            if(layEvent === 'update'){ //编辑
                updateGoods(data);//data主当前点击的行
            }else if(layEvent === 'delete'){ //删除
                layer.confirm('确定删【'+data.goodsname+'】商品吗？',{icon:3, title:'提示信息'},function(index){
                    $.post("/goods/deleteGoods",{
                        id : data.id  //将需要删除的id作为参数传入
                    },function(data){
                        //刷新table
                        tableIns.reload();
                        //关闭提示框
                        layer.close(index);
                    })
                });
            }
        });
        
      //上传图片
	    upload.render({
	        elem: '#goodsimgDiv',
	        url: '/file/uploadFile',
	        method : "post",  //此处是为了演示之用，实际使用中请将此删除，默认用post方式提交
	        acceptMime:'images/*',
	        field:"mf",
	        done: function(res, index, upload){
	            $('#showGoodsImg').attr('src',"/file/downloadShowFile?path="+res.data.src);
	            $('#goodsimg').val(res.data.src);
	            $('#goodsimgDiv').css("background","#fff");
	        }
	    });
    })
    
</script>
</html>